/**
 * 酒秀
 * 9elephas.com
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Animated,
    Dimensions
} from 'react-native';
const rootWidth: number = Dimensions.get('window').width;

export default class Me extends Component {
    static navigationOptions = {
        title: '我的'
    };

    constructor(props) {
        super(props)
        this.state = {
            isShow: false,
        }
    }

    /*
     * 生命周期 render之前
     */
    componentWillMount(): void {
        console.log("---------componentWillMount");

    }


    render() {
        return (
            <View style={{flex:1}}>

                {this.state.isShow ? <View style={{height:100,backgroundColor:'black'}}></View> : undefined}
                <ScrollView showsVerticalScrollIndicator={false}
                            onScroll={this._onScroll.bind(this)}
                            scrollEventThrottle={200}
                >
                    <Text style={{height:50}}>我的</Text>
                    {this.state.isShow ? undefined : <View style={{height:100,backgroundColor:'black'}}></View> }
                    <Text style={{height:200}}>我的</Text>
                    <Text style={{height:200}}>我的</Text>
                    <Text style={{height:200}}>我的</Text>
                    <Text style={{height:200}}>我的</Text>
                    <Text style={{height:200}}>我的</Text>
                    <Text style={{height:200}}>我的</Text>
                    <Text style={{height:200}}>我的</Text>
                </ScrollView>
            </View>
        )
    }

    /*
     * 完成渲染后调用的生命周期函数在render函数之后执行
     */
    componentDidMount() {
        console.log("---------componentDidMount");

    }

    /*
     * 生命周期 从屏幕移除之前
     */
    componentWillUnmount() {
        console.log("---------componentWillUnmount");
    }

    _renderNavBarView(): void {
        return (<Animated.View
            style={{  height:64,justifyContent:'center',position:'absolute',top:0,width:rootWidth}}
            ref={(node)=>{this.navBar = node;}}>>
            <Animated.View
                style={{opacity:this.state.opacity,width:rootWidth,height:64,top:0,backgroundColor:'red'}}>
            </Animated.View>
        </Animated.View>)
    }

    _onScroll(event): void {
        let dy = event.nativeEvent.contentOffset.y;
        console.log("dy", dy);
        if (dy > 50.1) {
            this.setState({isShow: true})
        } else {
            this.setState({isShow: false})
        }
    }
}

const styles = StyleSheet.create({
    container: {
        width: 100,
        height: 100,
        borderRadius: 10
    }
})



